<template>
  <div class="box">
    <h1>Provide与Inject{{car}}</h1>
    <hr />
    <Child></Child>
  </div>
</template>

<script setup lang="ts">
  import Child from './Child.vue'
  import { provide, ref } from 'vue'
  // provide，inject: 可以实现隔辈组件通信
  
  const car = ref('法拉利')
  
  // provide：给后代组件通过数据，第一个参数为数据的key，第二个参数为祖先组件提供的数据
  provide('TOKEN', car)

</script>

<style scoped>
.box {
  width: 100vw;
  height: 600px;
  background: skyblue;
}
</style>